<template>
	<scroll-view @scrolltolower="handleToLower" class="recomment" scroll-y v-if="recommends.length>0">
		<!-- 推荐开始 -->
		<view class="recommend_wrap">
			<navigator :url="`/pages/album/album?id=${item.target}`" class="recommend_item" v-for="(item,i) in recommends" :key="i">
				<image :src="item.thumb" mode="widthFix"></image>
			</navigator>
		</view>
		<!-- 月份开始 -->
		<view class="monthes_wrap">
			<view class="monthes_title">
				<view class="monthes_title_info">
					<view class="time">{{monthes.DD}} / {{monthes.MM}}月</view>
					<view class="text">{{monthes.title}}</view>
				</view>
				<view class="monthes_title_more">
				   <view>更多</view>
				   <view class="iconfont icon-right"></view>
				</view>
				
			</view>
			<view class="monthes_content">
				<view class="monthes_item" v-for="(item,i) in monthes.items" :key="i">
					<go-detail :list="monthes.items" :index="i">
					<image mode="aspectFill" :src="item.img+item.rule.replace('$<Height>',360)"></image>
					</go-detail>
				</view>
			</view>
		</view>
		<!-- 热门开始 -->
		<view class="hots">
			<view class="hots_title">热门</view>
			<view class="hot_content">
				<view class="hots_item" v-for="(item,i) in hots" :key="i">
					<go-detail :list="hots" :index="i">
					<image mode="widthFix" :src="item.thumb"></image>
					</go-detail>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import moment from 'moment';
//引入goDetail 组件
import goDetail from '@/components/goDetail.vue';
	export default {
		data() {
			return {
				//推荐列表
				recommends: [],
				//日期
				monthes: {},
				hots: [],
				params: {
					limit: 30,
					order: "hot",
					skip: 0
				},
				hasMore: true
			}
		},
		components: {
			goDetail
		},
		mounted() {
			
			this.getDataList()
		},
		methods: {
			async getDataList(){
				this.request({
					url: 'http://157.122.54.189:9088/image/v3/homepage/vertical',
					data: this.params,
				}).then(res => {
					if(res.data.res.vertical === 0){
						uni.showToast({
							title: '没有更多数据了',
							icon: "none"
						})
						this.hasMore = false
						return
					}
					if(this.recommends.length === 0){
						//推荐
						this.recommends = res.data.res.homepage[1].items
						// 月份
						this.monthes = res.data.res.homepage[2];
						this.monthes.MM = moment(this.monthes.stime).format("MM");
						this.monthes.DD = moment(this.monthes.stime).format("DD");
					}
					
					//热门 数组连接
					this.hots = [...this.hots,...res.data.res.vertical]
					console.log(this.monthes)
				})
			},
			handleToLower(){
				console.log('到底了')
				this.params.skip += this.params.limit;
				if(this.hasMore){
					this.getDataList();
				}else {
					uni.showToast({
						title: '没有数据了',
						icon: 'none'
					})
				}
				
		    }
	 }
	}
</script>

<style lang="scss" scoped>
.recomment {
	height: calc(100vh - 36px);
}
.recommend_wrap	{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.recommend_item {
		
		width: 49.5%;
		padding: 5rpx 0;
		
	}
}
.monthes_title {
	padding: 10rpx 5rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.monthes_title_info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
		.time {
			font-size: 32rpx;
			color: #f9273f;
			padding: 0 8rpx;
		}
		.text {
			font-size: 30rpx;
			color: #000000;
		}
	}
	.monthes_title_more {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #f9273f;
		font-size: 26rpx;
	}
}
.monthes_content {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.monthes_item {
		width: 32.5%;
		padding: 4rpx 0;
	}
	
}
.hots_title {
	font-size: 30rpx;
	border-left: 10rpx solid #f92660;
	padding-left: 10rpx;
	margin-left: 5rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
	margin-top: 10rpx;
}
.hot_content {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 4rpx;
	.hots_item {
		width: 32.5%;
		padding: 4rpx 0;
	}
}
</style>
